<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="ele-2.15.7/index.js"></script>
  <script src="js/jquery-1.9.0.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="images/ThreeGayslogo.png"/>
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <title>购物车</title>
  <link rel="stylesheet" type="text/css" href="css/index-z.css" />
  <link rel="stylesheet" type="text/css" href="css/shoppingcart.css">
  <!--跑马灯标题-->
</head>
<body>
<!--主页面-->
<div id="app">
  <!--    固定的menu-->
  <div id="header" class="head-one">
    <a class="logoname" href="index.html">ThreeGays</a>
    <a href="Personal_homepage/Personal.html">
      <i  class="el-icon-user"
          style="margin-right: 20px;"></i>
    </a>
    <a href="shop.html" title="我的购物车"><i  class="el-icon-shopping-cart-1"></i></a>
    <!--        <div style=""></div>-->
    <i class="el-icon-search" @click="show0 =!show0,show00=false"></i>
    <transition name="el-zoom-in-center">
      <div class="search"
           @click="show0=true,show00=!show00" v-show="show0">
        <input type="text" class="search-ipt" placeholder="探索新世界"/>
      </div>
    </transition>
  </div>
  <!--    顶部底色-->
  <div class="top"></div>
  <!--    搜索menu-->
  <transition name="el-zoom-in-top">
    <div v-show="show00" class="menudiv0" @click="show00=false,show0=false">
      <ul>
        <li style="font-size: 10px;font-weight: lighter; color: #828282 ">热门搜索</li>
        <li><i  class="el-icon-right"></i><a href="">HUAWEI P60 Art</a></li>
        <li><i  class="el-icon-right"></i><a href="">iPhone14 Pro Max</a></li>
        <li><i  class="el-icon-right"></i><a href="">AirPods Pro</a></li>
        <li><i  class="el-icon-right"></i><a @click="show2 = true,show00=false">phone</a></li>
        <li><i  class="el-icon-right"></i><a href="">配件</a></li>
      </ul>
    </div>
  </transition>
  <div class="main" >
<!--      <table style="width: 100%;border: 2px solid whitesmoke">-->
<!--        <thead>-->
<!--        <tr>-->
<!--          <th><el-checkbox v-model="isAll" @change ="handleChangeAll()"><span style="font-weight: bold">全选</span></el-checkbox></th>-->
<!--          <th>图片</th>-->
<!--          <th>商品</th>-->
<!--          <th>数量</th>-->
<!--          <th>操作</th>-->
<!--        </tr>-->
<!--        </thead>-->
<!--        购物车单个商品-->
<!--          <el-button @click="cartshow1 = !cartshow1">Click Me</el-button>-->
        <transition name="el-zoom-in-center">
          <div v-show="cartshow1" class="cartitle">
            <el-checkbox style="margin-left: 50px; margin-top: 15px" v-model="isAll" @change ="handleChangeAll()"><span style="font-weight: bold">全选</span></el-checkbox>
            <span class="cartitle-s">照片</span>
            <span class="cartitle-s" style="margin-left: 220px">商品</span>
            <span class="cartitle-s" style="margin-left: 215px">数目</span>
            <span class="cartitle-s" style="margin-left: 140px">操作</span>
          </div>
        </transition>
          <transition name="el-zoom-in-top">
          <div v-show="cartshow1" class="car">
              <div class="cart" v-for="items, index in goods">
                <input type="checkbox" :value="items" style="margin-top: 70px;margin-left: 50px;" v-model="checklist"  @change ="handleChange">
                <div class="cartinfo">
                  <span style="font-weight: bold">{{items.product}}</span><br><span style="font-size: 12px; color: #6e6e73">RMB {{items.price}}</span>
                </div>
                <img v-if="items.image" :src="path + items.image">
                <div style="margin-left: 650px; margin-top: -75px">
                  <el-button  @click = "items.amount--;handleChange()" :disabled = "items.amount === 1" style="background-color: #FFFFFF; border: none; color: #6e6e73; border-radius: 20px" icon="el-icon-minus" size="small" ></el-button>
                  <input :value="items.amount" type="text" style="border-radius: 18px; height: 22px; background-color: #eeeef0; border: none; width: 50px; text-align: center;" placeholder="1">
                  <el-button  @click = "items.amount++;handleChange()" :disabled = "items.amount === items.limit" style="background-color: #FFFFFF; border: none; color: #6e6e73; border-radius: 20px" icon="el-icon-plus"  size="small" ></el-button>
                </div>
                <transition name="el-fade-in">
                  <div style="margin-left: 800px; margin-top: -87px; height: 150px; width: 200px;" @mouseover.prevent="cartshow = true"  @mouseout="cartshow = false" >
<!--                    <el-popover-->
<!--                            v-show="del"-->
<!--                            placement="bottom"-->
<!--                            title=""-->
<!--                            width="200"-->
<!--                            trigger="click"-->
<!--                            vlue="false"-->
<!--                            open-delay="500">-->
<!--                      <p style="color: #6e6e73">确定不要了吗？</p>-->
<!--                      <div style="margin-left: 120px; margin-top: -22px">-->
<!--                        <el-button size="mini" type="text" icon="el-icon-check" @click="del()" circle></el-button>-->
<!--                        <el-button type="danger" size="mini" icon="el-icon-close" @click="del()" circle></el-button>-->
<!--                      </div>-->
<!--                    </el-popover>-->
                    <el-button @click="handleDeleteClick(index, items.id)" style="margin-top: 55px; margin-left: 80px; background-color: #FFFFFF; color: red" type="danger" icon="el-icon-delete" v-show="cartshow" size="small" circle></el-button>
                  </div>
                </transition>
              </div>
          </div>
        </transition>
<!--        <tbody style="border-top: 1px solid whitesmoke">-->
<!--        <tr style="text-align: center;" v-for="items, index in goods">-->
<!--          <td><input type="checkbox" v-model="checklist" :value="items" @change ="handleChange"></td>-->
<!--          <td style="width: 200px"><img v-if="items.image" :src="'/PhoneShop_war_exploded/' + items.image" class="avatar" style="height: 100px"></td>-->
<!--          <td><span>{{items.product}}</span><br><span style="color: red">￥{{items.price}}</span></td>-->
<!--          <td>-->
<!--            <el-button @click = "items.amount&#45;&#45;;handleChange()" :disabled = "items.amount === 1" style="padding: 12px "><span >-</span></el-button>-->
<!--            <span>{{items.amount}}</span>-->
<!--            <el-button @click = "items.amount++;handleChange()" :disabled = "items.amount === items.limit"style="padding: 12px;"><span>+</span></el-button>-->
<!--          </td>-->
<!--          <td>-->
<!--            <el-popconfirm-->
<!--                    confirm-button-text='确定'-->
<!--                    cancel-button-text='取消'-->
<!--                    icon="el-icon-info"-->
<!--                    icon-color="red"-->
<!--                    title="确定删除吗？"-->
<!--                    @confirm="handleDeleteClick(index, items.id)">-->
<!--              <el-button slot="reference">删除</el-button>-->
<!--            </el-popconfirm></td>-->
<!--        </tr>-->
<!--        </tbody>-->
<!--      </table>-->
      <div class="gm">
        <span>￥ <a style="color: #1d1d1f">{{total}}</a></span>
        <el-button style="float: right; margin-right: 20px; border-radius: 18px; margin-top: 8px" type="success" size="medium" plain icon="el-icon-shopping-bag-1"  @click.prevent="buy"></el-button>
      </div>
    <div class="footer">
      <div class="footinfo1">
        <p>1.网站简介：ThreeGays一个专注于电子设备的高质量平台，只为给您提供更加舒适便捷优质的服务，ThreeGays祝您购物愉快。2.关于网站：此网站由ThreeGays赞助 由Team ThreeGays制作 此网站仅供学习使用 严禁私自转发商用 一经发现后果自负。</p>
        <p>3.关于购物：用户可在商店界面进行购物，商品出现任何问题可以咨询网站客服，由于本商店售卖商品的特殊性，因此任何商品均不支持7天无理由退款。但本商店支持保修服务，产品保修一般为3个月，注意不同产品可能存在保修期限不同，请用户注意</p>
        <p>留意商品界面的详细信息再进行购买。4.加入ThreeGays:ThreeGays仍处于试验阶段，若你想要加入我们请联系我们，我们会在七个礼拜日内与您取得联系，Team ThreeGays欢迎你的加入。5.声明：ThreeGays仅此一个网站，其他均为假冒，谨防上当受骗。</p>
      </div>
      <div class="footinfo">
        <p class="about">
          <a href="">关于我们</a>|
          <a href="">商务合作</a>|
          <a href="">投诉指引</a>|
          <a href="">购物协议</a>|
          <a href="">个人隐私政策</a>|
          <a href="">用户服务协议</a>|
          <a href="">ThreeGays制作人协议</a>|
          <a href="">商家入驻协议</a>|
          <a href="">联系我们</a>|
          <a href="">HELP</a>
        </p>
        <p>
          <a href="http://www.12377.cn">违法和不良信息举报：www.12377.cn</a> 举报电话：12377
          <a href="https://jbts.mct.gov.cn/">12318全国文化市场举报网站</a></p>
        <p>Copyright (C) 2004-2022 ThreeGays.All Rights Reserved</p>
      </div>
    </div>
  </div>

<!--  <el-dialog-->
<!--          title="确认购买"-->
<!--          :visible.sync="dialogVisible"-->
<!--          width="30%">-->
<!--    <div style="display: flex; justify-content: space-around">-->
<!--      <el-form>-->
<!--        <el-form-item label="总价:" :label-width="formLabelWidth">-->
<!--          <span style=" font-weight: bolder">&nbsp;&nbsp;{{total}}</span>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="收货人:" :label-width="formLabelWidth">-->
<!--          <el-input v-model="name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="电话号码:" :label-width="formLabelWidth">-->
<!--          <el-input v-model="telphone" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="收货地址:" :label-width="formLabelWidth">-->
<!--&lt;!&ndash;          <el-input v-model="address" autocomplete="off"></el-input>&ndash;&gt;-->
<!--          <select v-model="add_province" id="province" class='province' msgEmpty="请选择省份" style="width: 150px;border-radius: 5px;height: 30px;border: 1px solid black">-->
<!--            <option value="" style="border-radius: 5px;height: 30px;border: 1px solid black">请选择</option>-->
<!--          </select>&nbsp;&nbsp;&nbsp;-->
<!--          <select v-model="add_city" id="city" class='city' msgEmpty="请选择城市" style="border-radius: 5px;height: 30px;border: 1px solid black;margin-left: 5px;width: 150px;">-->
<!--            <option value="" style="border-radius: 5px;height: 30px;border: 1px solid black">请选择</option>-->
<!--          </select>-->
<!--          <input type="text" id="site"v-model="add_site" placeholder="请填写详细地址" style="width:316px; padding-left: 5px;border-radius: 5px;height: 30px;border: 1px solid black"><br/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="支付方式:" :label-width="formLabelWidth">-->
<!--          <el-radio v-model="radio" label="1">微信支付</el-radio>-->
<!--          <el-radio v-model="radio" label="2">支付宝支付</el-radio>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="commit">确 定</el-button>-->
<!--  </span>-->
<!--  </el-dialog>-->

<!--  <el-dialog-->
<!--          title="确认购买"-->
<!--          :visible.sync="dialogVisible"-->
<!--          width="30%">-->
<!--    <div style="display: flex; justify-content: space-around">-->
<!--      <el-form>-->
<!--        <el-form-item label="总价:" :label-width="formLabelWidth">-->
<!--          <span style=" font-weight: bolder">&nbsp;&nbsp;{{total}}</span>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="收货人:" :label-width="formLabelWidth">-->
<!--          <el-input v-model="name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="电话号码:" :label-width="formLabelWidth">-->
<!--          <el-input v-model="telphone" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="收货地址:" :label-width="formLabelWidth">-->
<!--&lt;!&ndash;          <el-input v-model="address" autocomplete="off"></el-input>&ndash;&gt;-->
<!--          <select name="add_province" v-model="add_province" id="province" class='province' @change.prevent="proChange" style="width: 150px;border-radius: 5px;height: 30px;border: 1px solid black">-->
<!--            <option v-for="province in pro" :value="province" style="border-radius: 5px;height: 30px;border: 1px solid black">{{province}}</option>-->
<!--          </select>-->
<!--          <select name="add_city" v-model="add_city" id="city" class='city' style="border-radius: 5px;height: 30px;border: 1px solid black;margin-left: 5px;width: 150px;">-->
<!--            <option v-for="city in selectCity" style="border-radius: 5px;height: 30px;border: 1px solid black">{{city}}</option>-->
<!--          </select>-->
<!--          <input type="text" id="site"v-model="add_site" placeholder="请填写详细地址" style="width:316px; padding-left: 5px;border-radius: 5px;height: 30px;border: 1px solid black"><br/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="支付方式:" :label-width="formLabelWidth">-->
<!--          <el-radio v-model="radio" label="1">微信支付</el-radio>-->
<!--          <el-radio v-model="radio" label="2">支付宝支付</el-radio>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="showErweimaDialog">确 定</el-button>-->
<!--  </span>-->
<!--  </el-dialog>-->

  <dialog id="itemDialog">
    <div class="cont">
      <div style="margin-left: 15px;margin-top: 15px">
        <span>ThreeGays</span>
      </div>

      <div class="row" style="margin-top: 40px">
        <span>总价:</span> <span style="display: inline-block;margin-left: 20px;color: black">￥{{total}}</span>
      </div>

      <div class="row">
        <span>收货人:</span><input v-model="name" placeholder="请输入收货人名字" type="text" class="itemInput">
      </div>
      <div class="row">
        <span>电话号码:</span><input v-model="telphone" placeholder="请输入电话号码" type="text" class="itemInput">
      </div>
      <div class="row">
        <span>收货地址:</span>
        <select name="add_province" v-model="add_province" id="province" class='province' @change.prevent="proChange">
          <option v-for="province in pro" :value="province" style="height: 30px;">{{province}}</option>
        </select>
        <select name="add_city" v-model="add_city" id="city" class='city'>
          <option v-for="city in selectCity" style="height: 30px;">{{city}}</option>
        </select>

        <input type="text" id="site" class="itemInput" v-model="add_site" placeholder="请填写详细地址" style="margin-top: 10px;margin-left: 84px;width:200px; padding-left: 5px;height: 30px;"><br/>
      </div>
      <div class="row" style="margin-left: 40px">
        <span>支付方式:</span>
        <input class="radio" type="radio" v-model="radio" value="1" ><span>微信支付</span>
        <input class="radio" type="radio" v-model="radio" value="2" ><span>支付宝支付</span>
      </div>

      <div class="botn">
        <button class="btn" @click.prevent="showErweimaDialog" type="button">确定</button>
        <button class="btn" @click.prevent="closeItemDialog">取消</button>
      </div>

            </div>
          </dialog>

          <el-dialog title="ThreeGays"
                     :visible.sync="dialogerweima"
                     width="30%">

            <div style="text-align: center;">
              <img :src="erweima" style="margin-left: 0px;width: 200px;height: 200px">
            </div>
            <div style="margin-top: 20px;width: 100%;height: 40px;">
              <el-button type="primary" @click="commit" style="float: right">确 定</el-button>
            </div>

          </el-dialog>

        </div>
        <!--vue-->
<script>
  var v = new Vue({
    el: "#app",
    data: {
      show00 : false,
      show0: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      goods:[],
      checklist:[],
      isAll:false,
      checked: true,
      dialogVisible: false,
      dialogerweima: false,
      formLabelWidth: "100px",
      radio: 0,
      total : 0,
      editgoods: [],
      name : "",
      address : "",
      telphone: "",
      add_province:'请选择',
      add_city:'请选择',
      add_site:'',
      pro : ["请选择","山东", "天津", "吉林", "黑龙江", "江苏", "福建", "湖北", "湖南", "宁夏", "山西", "辽宁", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "内蒙古", "广西", "西藏", "新疆维吾尔", "北京", "上海", "重庆", "广东", "河北", "浙江", "安徽", "江西", "河南", "海南", "香港", "澳门", "台湾"],
      city : {
        北京: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "门头沟区", "密云县", "延庆县"],
        天津: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "北辰区", "津南区", "武清区", "宝坻区", "滨海新区", "静海县", "宁河县", "蓟县"],
        上海: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"],
        重庆: ["渝中区", "大渡口区", "江北区", "南岸区", "北碚区", "渝北区", "巴南区", "长寿区", "双桥区", "沙坪坝区", "万盛区", "万州区", "涪陵区", "黔江区", "永川区", "合川区", "江津区", "九龙坡区", "南川区", "綦江县", "潼南县", "荣昌县", "璧山县", "大足县", "铜梁县", "梁平县", "开县", "忠县", "城口县", "垫江县", "武隆县", "丰都县", "奉节县",
          "云阳县", "巫溪县", "巫山县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"
        ],
        河北: ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],
        山西: ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
        辽宁: ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
        吉林: ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治州"],
        黑龙江: ["哈尔滨", "齐齐哈尔", "鹤岗", "双鸭山", "鸡西", "大庆", "伊春", "牡丹江", "佳木斯", "七台河", "黑河", "绥化", "大兴安岭"],
        江苏: ["南京", "苏州", "无锡", "常州", "镇江", "南通", "泰州", "扬州", "盐城", "连云港", "徐州", "淮安", "宿迁"],
        浙江: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],
        安徽: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],
        福建: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
        江西: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],
        山东: ["烟台", "日照", "青岛", "淄博", "枣庄", "东营", "潍坊", "济宁", "泰安", "威海", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽", "济南"],
        河南: ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],
        湖北: ["武汉", "黄石", "十堰", "荆州", "宜昌", "襄樊", "鄂州", "荆门", "孝感", "黄冈", "咸宁", "随州", "恩施"],
        湖南: ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西"],
        广东: ["广州", "深圳", "珠海", "汕头", "韶关", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"],
        海南: ["海口", "三亚"],
        四川: ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"],
        贵州: ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "毕节", "黔西南", "黔东南", "黔南"],
        云南: ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
        陕西: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"],
        甘肃: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "平凉", "定西", "陇南", "临夏", "甘南"],
        青海: ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西"],
        内蒙古: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "锡林郭勒盟", "兴安盟", "阿拉善盟"],
        广西: ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
        西藏: ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里"],
        宁夏: ["银川", "石嘴山", "吴忠", "固原", "中卫"],
        新疆维吾尔: ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "和田", "阿克苏", "喀什", "克孜勒苏", "巴音郭楞", "昌吉", "博尔塔拉", "伊犁", "塔城", "阿勒泰"],
        香港: ["香港岛", "九龙东", "九龙西", "新界东", "新界西"],
        澳门: ["澳门半岛", "离岛"],
        台湾: ["台北", "高雄", "基隆", "新竹", "台中", "嘉义", "台南市"]
      },
      selectCity : [],
      erweima: "",
      cartshow : false,
      cartshow1 : false,
      del : false,
      path: location.pathname.substring(0,location.pathname.lastIndexOf("/") + 1),
    },
    created(){
      this.query();
      axios.get("QueryUserAddressServlet.s").then(res=> {
        console.log(res.data);
        if (res.data.data != null) {
          this.name = res.data.data.name;
          this.telphone = res.data.data.telphone;
          // if (res.data.data.site.length > 0) {
          //   console.log(res.data.data)
          //   var reg = /.+?(省|市|自治区|自治州|县|区)/g;
          //   var site = res.data.data.site.match(reg);
          //   this.add_province = site[0];
          //   this.add_city = site[1];
          //   console.log(this.add_province)
          //   for (let i = 2; i < site.length; i++) {
          //     this.add_site += site[i];
          //   }
          // }
        }
      })
    },
    mounted(){
      this.cartshow1 = true;
      // $(".province").change(function () {
      //   console.log(1);
      //   for (var i = 0; i < this.pro.length; i++) {
      //     $option = $("<option/>");
      //     $option.attr("value", this.pro[i]);
      //     $option.text(this.pro[i]);
      //     $(".province").append($option);
      //   }
      //   $(".province").change(function () {
      //   })
        // for (var i = 0; i < this.pro.length; i++) {
        //   $option = $("<option/>");
        //   $option.attr("value", this.pro[i]);
        //   $option.text(this.pro[i]);
        //   $(".province").append($option);
        // }
        // console.log(Object.keys(this.city))

    },
    methods: {
      closeItemDialog(){
        var cid = document.getElementById('itemDialog');
        cid.close();
      },
      showErweimaDialog(){

        if (this.name.length < 2 || this.name.length > 10) {
          this.$message("收货人姓名要求为2~10位");
          return;
        }
        if (this.telphone.length != 11){
          this.$message("电话号要求为11位");
          return;
        }
        if (this.add_province == '请选择' || this.add_province == ''){
          this.$message("请选择省份");
          return;
        }
        if (this.add_city == '请选择' || this.add_city == ''){
          this.$message('请选择城市');
          return;
        }
        if (this.add_site.length < 4 || this.add_site.length > 25){
          this.$message('请输入正确的详细地址');
          return;
        }
        // 打开详情dialog
        if(this.radio == 0){
          this.$message("请选择支付方式!");
          return;
        }
        this.closeItemDialog();
        if (this.radio == 1){
          this.erweima = "images/wechat.png";
        }else {
          this.erweima = "images/zfb.png";
        }
        this.dialogerweima = true
        this.radio = 0;
      },
      del(){
        this.del = false;
      },
      proChange() {
        console.log(this.add_province)
        for (i in this.city){
          if (i == this.add_province){
            this.selectCity = this.city[i];
            this.selectCity.splice(0, 0, '请选择')
            console.log(this.selectCity)
          }
        }
      },
      sum() {
        var total = 0
        this.checklist.forEach(items => {
          total += items.price * items.amount;
        });
        this.total = total;
        return total;
      },
      handleDeleteClick(index, id) {
        axios.get("RemoveCartProductServlet.s", {
          params: {
            product: this.goods[index].product,
            amount: this.goods[index].amount
          }
        }).then(res => {
          this.$message(res.data.msg);
        })
        // 删除 goods 列表中的 第 index 项
        this.goods.splice(index, 1)
        // 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，
        // 把checklist 这一项过滤掉，然后重新生成 checklist
        this.checklist = this.checklist.filter(items => items.id !== id)
        // 每点击删除事件时，触发 handleChange() 事件
        this.handleChange();
        this.sum()
      },
      handleChangeAll() {
        if (this.isAll) {
          this.checklist = this.goods;
          console.log(this.checklist);
        } else {
          this.checklist = [];
        }
        this.sum();
      },
      handleChange() {
        console.log(this.sum())
        if (this.checklist.length === this.goods.length) {
          this.isAll = true;
        } else {
          this.isAll = false;
        }
        this.sum();
      },
      query() {
        axios.get("QueryCartServlet.s").then(res => {
          this.goods = res.data;
          var index = 0;
          // this.goods.forEach(items => {
          //   console.log(this.goods);
          //   console.log(items)
          //   this.editgoods[index].product = items.product;
          //   this.editgoods[index++].amount = items.amount;
          // })
          for (let i = 0; i < this.goods.length; i++){
            this.editgoods[i] = {};
            this.editgoods[i].product = this.goods[i].product;
            this.editgoods[i].amount = this.goods[i].amount;
          }
        });
        this.sum();
      },
      buy() {
        // 获取product amount 数组
        let params = new URLSearchParams();
        this.checklist.forEach(items => {
          params.append("product", items.product);
          for (let i = 0; i < this.goods.length; i++){
            if (this.goods[i].product == items.product){
              console.log(items.amount)
              console.log(this.editgoods[i].amount)
              params.append("amount", items.amount - this.editgoods[i].amount);
            }
          }
        });
        // let p = new URLSearchParams();
        // p.append("pro","1");
        // p.append("pro","2");
        // p.append("pro","3");
        // p.append("num","1");
        // p.append("num","2");
        // p.append("num","3");
        axios.post("ModifyCartServlet.s", params).then(res => {
          if (res.data.code == 0) {
            this.$message("请勾选商品!");
          } else {
            // this.dialogVisible = true;
            var id = document.getElementById('itemDialog');
            id.showModal('打开dialog')
          }
        })
      },
      commit() {
        // 构建params 参数
        var params = new URLSearchParams();
        this.checklist.forEach(items => {
          params.append("product", items.product);
          params.append("amount", items.amount);
        });
        params.append("name", this.name);
        params.append("telphone", this.telphone);
        params.append("address", this.add_province + this.add_city + this.add_site);
        params.append("method", this.radio);
        params.append("total", this.total);
        axios.post("CommitCartServlet.s", params).then(res => {
          if (res.data.code == 1) {
            this.$message(res.data.msg);
            // 刷新购物车
            this.query();
            this.dialogVisible = false;
            this.dialogerweima = false;
            this.checklist = [];
            this.sum();
            this.isAll = false;
          } else {
            this.$message(res.data.msg);
          }
        });
        this.name = "";
        this.address = "";
        this.telphone= "";
        this.add_province='';
        this.add_city='请选择';
        this.add_site='';
        this.selectCity = [];
      }
    }



  })
</script>
<script>
  // var pro = ["山东", "天津", "吉林", "黑龙江", "江苏", "福建", "湖北", "湖南", "宁夏", "山西", "辽宁", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "内蒙古", "广西", "西藏", "新疆维吾尔", "北京", "上海", "重庆", "广东", "河北", "浙江", "安徽", "江西", "河南", "海南", "香港", "澳门", "台湾"];
  //
  // var city = {
  //   北京: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "门头沟区", "密云县", "延庆县"],
  //   天津: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "北辰区", "津南区", "武清区", "宝坻区", "滨海新区", "静海县", "宁河县", "蓟县"],
  //   上海: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"],
  //   重庆: ["渝中区", "大渡口区", "江北区", "南岸区", "北碚区", "渝北区", "巴南区", "长寿区", "双桥区", "沙坪坝区", "万盛区", "万州区", "涪陵区", "黔江区", "永川区", "合川区", "江津区", "九龙坡区", "南川区", "綦江县", "潼南县", "荣昌县", "璧山县", "大足县", "铜梁县", "梁平县", "开县", "忠县", "城口县", "垫江县", "武隆县", "丰都县", "奉节县",
  //     "云阳县", "巫溪县", "巫山县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"
  //   ],
  //   河北: ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],
  //   山西: ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
  //   辽宁: ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
  //   吉林: ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治州"],
  //   黑龙江: ["哈尔滨", "齐齐哈尔", "鹤岗", "双鸭山", "鸡西", "大庆", "伊春", "牡丹江", "佳木斯", "七台河", "黑河", "绥化", "大兴安岭"],
  //   江苏: ["南京", "苏州", "无锡", "常州", "镇江", "南通", "泰州", "扬州", "盐城", "连云港", "徐州", "淮安", "宿迁"],
  //   浙江: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],
  //   安徽: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],
  //   福建: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
  //   江西: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],
  //   山东: ["烟台", "日照", "青岛", "淄博", "枣庄", "东营", "潍坊", "济宁", "泰安", "威海", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽", "济南"],
  //   河南: ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],
  //   湖北: ["武汉", "黄石", "十堰", "荆州", "宜昌", "襄樊", "鄂州", "荆门", "孝感", "黄冈", "咸宁", "随州", "恩施"],
  //   湖南: ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西"],
  //   广东: ["广州", "深圳", "珠海", "汕头", "韶关", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"],
  //   海南: ["海口", "三亚"],
  //   四川: ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"],
  //   贵州: ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "毕节", "黔西南", "黔东南", "黔南"],
  //   云南: ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
  //   陕西: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"],
  //   甘肃: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "平凉", "定西", "陇南", "临夏", "甘南"],
  //   青海: ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西"],
  //   内蒙古: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "锡林郭勒盟", "兴安盟", "阿拉善盟"],
  //   广西: ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
  //   西藏: ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里"],
  //   宁夏: ["银川", "石嘴山", "吴忠", "固原", "中卫"],
  //   新疆维吾尔: ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "和田", "阿克苏", "喀什", "克孜勒苏", "巴音郭楞", "昌吉", "博尔塔拉", "伊犁", "塔城", "阿勒泰"],
  //   香港: ["香港岛", "九龙东", "九龙西", "新界东", "新界西"],
  //   澳门: ["澳门半岛", "离岛"],
  //   台湾: ["台北", "高雄", "基隆", "新竹", "台中", "嘉义", "台南市"]
  // };
  // $(document).ready(function() {
  //   for (var i = 0; i < pro.length; i++) {
  //     $option = $("<option/>");
  //     $option.attr("value", pro[i]);
  //     $option.text(pro[i]);
  //     $(".province").append($option);
  //   }
  //   $(".province").change(function() {
  //
  //     var cities = city[$(this).val()];
  //     $(".city").empty();
  //     $(".city").append("<option value=''>请选择</option>");
  //     for (var i = 0; i < cities.length; i++) {
  //       $option = $("<option/>");
  //       $option.attr("value", cities[i]);
  //       $option.text(cities[i]);
  //       $(".city").append($option);
  //     }
  //   });
  // });
</script>
</body>

<!--基础css-->
<style>
  html,body,#app{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #f5f5f7;
  }
  html{
    height: 100%;
  }
  table {
    border-spacing: 0px;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .main{
    background-color: #f5f5f7;
  }
  .footer {
    padding-left: 50px;
    margin-top: 10px;
    width: 100%;
    background-color: #f5f5f7;
  }

  body{
    overflow-x: hidden;height: 100%;
  }
  .el-container{
    height: 80%;
  }
  #itemDialog {
    padding: 0px;
    margin-top: 150px;
    margin-left: 40%;
    width: 400px;
    height: 400px;
    border: #EEEEEE;
    border-radius: 15px;
    background:#FFFFFD;
  }
  .row{
    margin-left: 40px;
    margin-top: 10px;
  }
  .row span {
    display: inline-block;
    height: 34px;
    width: 5em;
    line-height: 34px;
    font-size: 16px;
    text-align: justify;
    text-align-last: justify;
  }
  .itemInput{
    display: inline-block;
    width: 200px;
    height: 30px;
    margin-left: 10px;
    text-align:center;
    font-weight: bold;
    border-radius: 15px;
    font-size: 16px;
    border: none;
    background-color: #eeeeee;
    outline: none;
  }
  input:focus::-webkit-input-placeholder{
    color: transparent;
  }
  select {
    width: 100px;
    height: 30px;
    border: none;
    font-weight: bold;
    background-color: #eeeeee;
    border-radius: 15px;
    text-align: center;
  }
  .botn{
    margin-top: 20px;
  }
  .btn {
    display: inline-block;
    float: right;
    margin-right: 13%;
    width: 120px;
    height: 40px;
    font-size: 16px;
    border: none;
    background-color: black;
    font-weight: bold;
    color: white;
    border-radius: 18px;
    cursor: pointer;
  }
  .radio{
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    color: black;
  }
</style>

</html>
